<template>
  <div class="box">
    <div id="container">
    <div id="fireworks"><img src="../assets/fireworks.png" alt="" /></div>
    <div id="firecracker">
      <img src="../assets/firecracker.png" alt="" width="8px" />
    </div>
  </div>
  </div>
</template>

<style scoped>
.box{
  width: max-content;
  height: max-content;
}
#container {
  background-color: #000;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

#fireworks {
  transform: scale(0);
  /* 参数：name、duration、delay */
  animation: fireworks 3s 2s infinite;
}

@keyframes fireworks {
  0% {
    transform: scale(0);
  }

  80% {
    transform: scale(1);
  }

  100% {
    opacity: 0;
  }
}

#firecracker {
  position: absolute;
  left: 50%;
  bottom: 0%;
  margin-left: -4px;
  animation: firecracker 3s infinite;
}

@keyframes firecracker {
  0% {
    transform: scale(1);
    bottom: 0%;
  }

  100% {
    bottom: 60%;
    transform: scale(0);
  }
}
</style>
